import React, { Component, lazy, Suspense } from 'react';

import { Link, NavLink, Switch, Route, Redirect } from 'react-router-dom'

import "../styles/Index.css"

// import Home from './Index/Home'
// import Cate from './Index/Cate'
// import Allgood from './Index/Allgood'
// import Shopcart from './Index/Shopcart'
// import Mine from './Index/Mine'
// import NotFound from './NotFound'

// import Tabbar from '../components/Tabbar'
import MyTabbar from '../components/MyTabbar'
import Loading from '../components/Loading'


var Home = lazy(() => import('./Index/Home'));
var Cate = lazy(() => import('./Index/Cate'));
var Allgood = lazy(() => import('./Index/Allgood'));
var Shopcart = lazy(() => import('./Index/Shopcart'));
var Mine = lazy(() => import('./Index/Mine'));
var NotFound = lazy(() => import('./NotFound'));


class Index extends Component {
    render() {

        return (
            <div className='index'>

                {/* 定义二级路由规则 */}
                <Suspense fallback={<Loading />}>
                    <Switch>
                        <Route exact path="/index/home" component={Home} />
                        <Route exact path="/index/cate" component={Cate} />
                        <Route exact path="/index/allgood" component={Allgood} />
                        <Route exact path="/index/shopcart" component={Shopcart} />
                        <Route exact path="/index/mine" component={Mine} />
                        <Redirect exact from='/index' to="/index/home" />
                        <Route path="*" component={NotFound} />
                    </Switch>
                </Suspense>

                {/* Link 组件默认会渲染成a标签 */}
                {/* NavLink 组件默认会渲染成a标签, 但是NavLink会维护自身active类的添加/移除 */}
                {/* <Tabbar /> */}
                <MyTabbar />

            </div>
        );
    }
}

export default Index;